<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <div @click="clickDiv">
            <button @click="clickButton1">点击事件</button>
            <button @click.stop="clickButton2">stop修饰，点击事件</button>
        </div>

        <form action="https://www.baidu.com" @submit="submit1">
            <button type="submit">提交</button>
        </form>

        <form action="https://www.baidu.com" @submit.prevent="submit1">
            <button type="submit">提交</button>
        </form>

        <button @click.once="clickButtonOnce">once修饰，点击事件</button>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    msg:"hello vue"
                }
            },
            methods:{
                clickDiv(){
                    alert("div 父标签点击事件")
                },
                clickButton1(){
                    alert("button 子标签点击事件")
                },
                clickButton2(){
                    alert("button2 子标签点击事件")
                },
                submit1(){
                    alert("表单提交")
                },
                clickButtonOnce(){
                    alert("标签点击事件")
                }
            }
        })
    </script>
</body>
</html>